<script setup>
import ProductCard from '../components/ProductCard.vue'; // 导入商品卡片组件
import { RouterLink } from 'vue-router'; // 导入路由链接组件

// 模拟商品数据 - 实际项目中通常从API获取
const products = [
  {
      id: 1,
      name: 'HUWEI WATCH Ultimate 驰骋山地',
      price: 25999,
      description: '多功能智能手表，支持健康监测和通知提醒',
      image:  '/src/assets/images/watch.png',
      details: '这款智能手表采用最新技术，可以监测心率、血压、睡眠质量等健康数据。具有50米防水功能，适合各种运动场景。支持来电提醒、消息提醒、日程提醒等多种通知功能。',
    },
    {
      id: 2,
      name: 'HUWEI FreeClip 耳夹耳机 无线充 流光紫',
      price: 1099,
      description: '高品质无线蓝牙耳机，支持主动降噪',
      image: '/src/assets/images/earji.png',
      details: '这款无线耳机采用最新蓝牙5.2技术，提供稳定连接和低延迟。内置主动降噪系统，可有效降低环境噪音，让您在嘈杂环境中享受清晰音乐。单次充电可使用8小时，配合充电盒可使用24小时。',
    },
    {
      id: 3,
      name: '椭圆猫眼墨镜',
      price: 29.9,
      description: '防紫外线新款墨镜',
      image: '/src/assets/images/mojing.png',
      details: '这款椭圆猫眼墨镜采用防紫外线技术，猫眼造型时尚，适合多种场合佩戴。具备高清镜片，视物清晰，同时能有效阻挡紫外线，保护眼睛。设计贴合面部，佩戴舒适，是兼具美观与实用的新款墨镜。',
    },
    {
      id: 4,
      name: '珍珠项链',
      price: 4.99,
      description: '双层公主风配饰女高级感夏日唯美',
      image: '/src/assets/images/xianglian.png',
      details: '这款珍珠项链采用双层设计，呈现公主风，尽显高级感，夏日佩戴唯美。精选优质珍珠，光泽柔和，搭配精致链条，质感十足。可搭配多种服饰，无论是日常出街还是出席宴会，都能为你增添优雅气质，是夏日里不容错过的高级配饰。',
    },
    {
      id: 5,
      name: '不规则彩钻戒指',
      price: 4.58,
      description: 'ins小众设计高级感复古彩色锆石爱心',
      image: '/src/assets/images/jiezhi.png',
      details: '这款戒指采用不规则彩钻设计，融入 ins 风与复古元素，高级感十足。以彩色锆石镶嵌爱心造型，光泽璀璨，搭配独特切割工艺，尽显个性魅力。适合日常穿搭或派对佩戴，无论是搭配休闲装还是礼服，都能成为吸睛亮点，为你增添浪漫复古的时尚气息。',
    },
    {
      id: 6,
      name: '磁吸手机壳',
      price: 19.8,
      description: '防摔，磁吸',
      image: '/src/assets/images/sjk.png',
      details: '这款磁吸手机壳采用创新磁吸技术，可牢固吸附无线充电设备与配件。内置多层防摔结构，能有效缓冲撞击，为手机提供全方位防护。适配多种机型，无论是日常使用还是出行携带，都能轻松应对，兼具便捷性与实用性，是保护手机的优质选择。',
    },
    {
      id: 7,
      name: 'HUWEI MatePad 11.5 华为平板电脑',
      price: 1948,
      description: '144Hz高刷 2.8k护眼屏办公绘画学习',
      image: '/src/assets/images/pingban.png',
      details: '这款 HUWEI MatePad 11.5 采用先进技术，搭载 2.8k 分辨率屏幕，拥有 144Hz 高刷，画面流畅细腻。通过专业护眼认证，可有效过滤蓝光，降低视觉疲劳，呵护用眼健康。具备 7700mAh 大电池与 30W 快充功能，续航无忧。拥有 1300 万像素后置摄像头与 800 万像素超广角前置摄像头，拍照清晰。搭配 Histen 9.0 音效，音质出色。无论是办公时处理文档、绘画创作时精准捕捉灵感，还是学习上网课、阅读资料，它都能轻松胜任，满足多种场景需求。',
    },
    {
      id: 8,
      name: 'Lenovo 拯救者 R7000笔记本电脑',
      price: 5999,
      description: '165Hz 高刷新率，画面流畅丝滑',
      image: '/src/assets/images/computer.png',
      details: '这款 Lenovo 拯救者 R7000 笔记本电脑搭载先进处理器，配备高色域电竞屏与 165Hz 高刷新率，画面流畅丝滑。采用霜刃散热系统，确保高效稳定运行。内置 80Wh 大容量电池，续航持久。支持 135W 便携快充，快速恢复电量。拥有丰富接口，拓展便捷。无论是畅玩 3A 游戏大作，还是进行专业设计、多任务办公，都能凭借强劲性能轻松应对，满足多元场景需求。',
    },
    {
      id: 9,
      name: '手持小风扇',
      price: 39,
      description: '冰敷高速户外旅游便携手持大风折叠挂脖风扇',
      image: '/src/assets/images/fengshan.png',
      details: '这款手持小风扇运用前沿技术，内置冰敷功能，开启后可迅速降低风温，带来冰爽凉意。搭载高速电机，提供多档强劲风力选择，满足不同需求。具备折叠与挂脖设计，既能手持方便出行，又可挂脖解放双手，适合户外旅游、逛街散步等多样场景。采用大容量锂电池，续航持久，还支持便捷充电。配备清晰显示屏，实时呈现风速档位、电量等信息，操作一目了然，是夏日消暑的得力助手 。',
    },
  {
    id: 10,
    name: '洗衣液',
    price: 9.9,
    description: '持久留香深层去渍净白去污护色洗涤用品家用无磷',
    image: '/src/assets/images/xiyiye.png',
    details: '这款洗衣液采用创新配方技术，强效清渍，柔顺护衣。',
  },
];
</script>

<template>
  <div>
    <div class="home-page">
      <h1>欢迎来到你好电商平台</h1>
      
      <!-- 购物车链接 -->
      <div class="cart-link">
        <RouterLink to="/cart">查看购物车</RouterLink>
      </div>
      
      <!-- 商品网格布局 -->
      <div class="products-grid">
        <!-- 循环渲染商品卡片组件 -->
        <ProductCard 
          v-for="product in products" 
          :key="product.id" 
          :product="product" 
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  margin: 10px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.home-page h1 {
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.cart-link {
  text-align: center;
  margin-bottom: 10px;
}

.cart-link a {
  background-color: #42b983;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.cart-link a:hover {
  background-color: #388e3c;
}

.products-grid-container {
  display: flex;
  justify-content: center;
}
.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  max-width: 1200px; /* 设置最大宽度，确保在大屏幕上不会无限扩展 */
  width: 100%;
}
</style>